<style lang="less" scoped>
    .staff {
        width: 100%;
        height: auto;
        overflow: hidden;
        text-align: center;
        padding: 8px;
        display: flex;
        .left{
            flex-grow: 1;
        }
        .right{
            min-width: 300px;
            width: 300px;
            margin-left: 10px;
            .row{
                display: flex;
                align-items: center;
            }
        }
    }
</style>
<template>
    <div class="staff">
        <div class="left">
            <card-table
                cardtitle="员工列表"
                addbuttext="添加员工"
                :columns="columns"
                :selectList="selectList"
                :defaultSelete="defaultSelete"
                :searchForm="searchForm"
                :formItem="formItem"
                @add="add"
                @refresh="refresh"
                @on-current-change="onCurrentChange"
                :data="tabledata">
                <div class="fastscreen" slot="bottom" style="margin-top: 5px">
                    <ButtonGroup size="small">
                        <Button v-for="item in fastscreenData" :key="item.key" :type="item.key === fastscreenVlue ? 'primary' : 'ghost'" @click="fastscreenClick(item)">{{ item.label }}</Button>
                    </ButtonGroup>
                </div>
            </card-table>
        </div>
        <div class="right">
            <my-card cardtitle="详情" :showright="current != null" icon="compose" cardbtn="编辑" @cardrightclick="xqclick">
                <ul v-if="current">
                    <li>
                        <div class="row">
                            <p style="text-align: right">姓名：</p>
                            <p style="text-align: left;">{{ current.realname }}</p>
                        </div>
                    </li>
                    <li>
                        <div class="row">
                            <p style="text-align: right">联系方式：</p>
                            <p style="text-align: left;">{{ current.phone }}</p>
                        </div>
                    </li>
                    <li>
                        <div class="row">
                            <p style="text-align: right">邮箱：</p>
                            <p style="text-align: left;">{{ current.email }}</p>
                        </div>
                    </li>
                    <li>
                        <div class="row">
                            <p style="text-align: right">岗位：</p>
                            <p style="text-align: left;">{{ current.post }}</p>
                        </div>
                    </li>
                    <li>
                        <div class="row">
                            <p style="text-align: right">当前状态：</p>
                            <p style="text-align: left;">{{ current.state == 1 ? '在职' : '离职' }}<Button style="color: #2b85e4" type="text" @click="stateupdate">变更</Button></p>
                        </div>
                    </li>
                    <li>
                        <div class="row">
                            <p style="text-align: right">备注：</p>
                            <p style="text-align: left;">{{ current.remark }}</p>
                        </div>
                    </li>
                    <!--<li>
                        <div class="row">
                            <p style="text-align: right">用户名：</p>
                            <p style="text-align: left;">{{ current.name }}</p>
                        </div>
                    </li>
                    <li>
                       <div class="row">
                           <p style="text-align: right">密码：</p>
                           <p style="text-align: left;">{{ passworded ? current.password : '*********' }}</p>
                           <Icon style="cursor: pointer;margin-left: 10px" :type="passworded ? 'eye-disabled' : 'eye'" @click.native="passworded = !passworded"></Icon>
                        </div>
                    </li>-->
                </ul>
            </my-card>
            <my-card cardtitle="用户名" :showright="false" style="margin-top: 10px">
                <div slot="mycardtitle" v-if="current && current.name != ''" style="margin-left:20px;flex-grow:1;display: flex;justify-content:flex-end;">
                    <Button type="text" @click="uodateuser">修改</Button>
                    <Button type="text" @click="removeusermodel = true">删除</Button>
                </div>
                <span v-if="current && current.name == ''"></span>
                <Button v-if="current && current.name == ''" type="dashed" @click="adduser = true">添加用户</Button>
                <ul v-if="current && current.name != ''">
                    <li>
                        <div class="row">
                            <p style="text-align: right">用户名：</p>
                            <p style="text-align: left;">{{ current.name }}</p>
                        </div>
                    </li>
                    <li>
                        <div class="row">
                            <p style="text-align: right">密码：</p>
                            <p style="text-align: left;">{{ passworded ? current.password : '*********' }}</p>
                            <Icon style="cursor: pointer;margin-left: 10px" :type="passworded ? 'eye-disabled' : 'eye'" @click.native="passworded = !passworded"></Icon>
                        </div>
                    </li>
                </ul>
            </my-card>
            <my-card cardtitle="权限" :showright="true" icon="compose" :cardbtn="!showcheckbox ? '取消' : '编辑'" @cardrightclick="cardrightclick" style="margin-top: 10px">
                <!--<Tree style="text-align: left" :data="treedataClone" :show-checkbox="true"></Tree>-->
                <CheckboxGroup v-model="permissions" style="font-size: 20px">
                    <Checkbox label="11" :disabled="showcheckbox">员工管理</Checkbox>
                    <Checkbox label="21" :disabled="showcheckbox">客户管理</Checkbox>
                    <Checkbox label="31" :disabled="showcheckbox">产品管理</Checkbox>
                    <Checkbox label="41" :disabled="showcheckbox">订单管理</Checkbox>
                    <Checkbox label="51" :disabled="showcheckbox">物料管理</Checkbox>
                    <Checkbox label="61" :disabled="showcheckbox">仓库管理</Checkbox>
                    <Checkbox label="71" :disabled="showcheckbox">品质管理</Checkbox>
                    <Checkbox label="81" :disabled="showcheckbox">设备管理</Checkbox>
                    <Checkbox label="1" :disabled="showcheckbox">生产管理</Checkbox>
                </CheckboxGroup>
                <div style="text-align: right">
                    <Button type="primary" v-show="!showcheckbox" size="small" @click="updataquanxian">提交</Button>
                </div>
            </my-card>
            <my-card cardtitle="工时信息" :showright="true" icon="compose" cardbtn="添加" @cardrightclick="gsclick" style="margin-top: 10px">
                <Card style="margin-bottom: 10px">
                    <div>
                        <span style="font-size: 16px">本月工时：</span>
                        <span style="font-size: 36px;font-weight: 900;color: yellowgreen">{{ current ? current.hours : '0' }}H</span>
                    </div>
                </Card>
            </my-card>
        </div>
        <add-staff v-model="addStaff" @setuserdata="setuserdata" @setmodel="state => { this.addStaff = state}"></add-staff>
        <edit-staff v-model="editstaff" :current="current" @setuserdata="setuserdata" @setmodel="state => { this.editstaff = state}"></edit-staff>
        <edit-hours v-model="editHours" ref="edithours" @setuserdata="setuserdata"></edit-hours>
        <Modal
            v-model="stateedit"
            title="员工状态更改"
            :loading="stateloading"
            @on-ok="stateOk">
            <RadioGroup v-model="statecurrent">
                <Radio label="1">在职</Radio>
                <Radio label="2">离职</Radio>
            </RadioGroup>
        </Modal>
        <Modal
            v-model="adduser"
            title="员工用户信息"
            :loading="adduserloading"
            @on-cancel="() => {this.$refs['addUserForm'].resetFields();}"
            @on-ok="adduserOk">
            <Form :model="addUserForm" :label-width="120" ref="addUserForm" :rules="rule">
                <FormItem label="用户名：" prop="name">
                    <Input v-model="addUserForm.name" placeholder="请输入6-16位用户名" :maxlength="16" style="width: 200px"></Input>
                </FormItem>
                <FormItem label="密码：" prop="password">
                    <Input v-model="addUserForm.password" type="password" placeholder="请输入6-16位密码" :maxlength="16" style="width: 200px"></Input>
                </FormItem>
                <FormItem label="确认密码：" prop="passwordcheck">
                    <Input v-model="addUserForm.passwordcheck" type="password" placeholder="请再输入一次密码" :maxlength="16" style="width: 200px"></Input>
                </FormItem>
            </Form>
        </Modal>
        <Modal v-model="removeusermodel" width="360">
            <p slot="header" style="color:#f60;text-align:center">
                <Icon type="information-circled"></Icon>
                <span>用户删除</span>
            </p>
            <div style="text-align:center">
                <p>正在删除员工用户信息</p>
                <p>确认要这么做吗?</p>
            </div>
            <div slot="footer">
                <Button type="error" size="large" long :loading="removeuserloading" @click="removeuserok">确认删除</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
    import CardTable from '../components/cardTable.vue'
    import MyCard from '../components/myCard.vue'
    import AddStaff from './addstaff.vue'  //  添加员工
    import EditStaff from './editstaff.vue'  //  修改员工
    import EditHours from './edithours.vue'

    export default {
        name: 'staff',
        data () {
            return {
                role: false,
                userid: '',
                hoursForm: {
                    hours: ''
                },
                editHours: false,
                stateedit: false, //  状态变更
                statecurrent: '1', // 当前选中的状态
                stateloading: true,
                adduser: false, // 添加用户信息
                adduserloading: true,
                addUserForm: {
                    name: '',
                    password: '',
                    passwordcheck: '',
                    power: []
                },
                removeusermodel: false,  //  删除用户
                removeuserloading: false,
                addStaff: false, //  添加员工模态框
                addUser: false, //  添加账号模态框
                editstaff: false, // 修改员工模态框
                fastscreenData: [
                    {
                        label: '全部',
                        key: '0'
                    },
                    {
                        label: '在职',
                        key: '1'
                    },
                    {
                        label: '离职',
                        key: '2'
                    }
                ],  //  快速筛选
                fastscreenVlue: '1',  //  快速筛选默认项
                columns: [
                    {
                        title: '员工编号',
                        key: 'nub'
                    },
                    {
                        title: '姓名',
                        key: 'realname'
                    },
                    {
                        title: '联系方式',
                        key: 'phone'
                    },
                    {
                        title: '邮箱',
                        key: 'email'
                    },
                    {
                        title: '岗位',
                        key: 'post'
                    },
                    {
                        title: '用户名',
                        key: 'name',
                        render: (h, params) => {
                            if (params.row.name != '') {
                                return h('span', params.row.name)
                            } else {
                                return h('span', {
                                    props: {
                                        type: 'text'
                                    }
                                }, '无用户')
                            }
                        }
                    },
                    {
                        title: '工时',
                        key: 'hours',
                        render: (h, params) => {
                            return h('span', {}, params.row.hours + '小时')
                        }
                    },
                    {
                        title: '当前状态',
                        key: 'state',
                        render: (h, params) => {
                            return h('div', {}, [
                                h('span', {
                                    class: 'ivu-tag-dot-inner',
                                    style: {
                                        background: params.row.state == '1' ? 'green' : 'red'
                                    }
                                }),
                                h('span', params.row.state == '1' ? '在职' : '离职')
                            ])
                        }
                    },
                    {
                        title: '备注',
                        key: 'remark',
                        render: (h, params) => {
                            if (params.row.remark != '') {
                                return h('span', params.row.remark)
                            } else {
                                return h('span', '无备注')
                            }
                        }
                    }
                ],  //  表格列
                data: [],  //  表格数据
                selectList: [
                    {
                        label: '姓名',
                        value: 'realname'
                    },
                    {
                        label: '用户名',
                        value: 'name'
                    },
                    {
                        label: '工时',
                        value: 'hours'
                    },
                    {
                        label: '权限',
                        value: 'power'
                    }
                ],  //  搜索下拉列表
                defaultSelete: 'realname',  //  搜索下拉列表默认值
                searchForm: {
                    realname: '',
                    name: '',
                    hours: '',
                    power: ''
                },  //  表单初始值
                formItem: [
                    {
                        label: '姓名',
                        key: 'realname',
                        placeholder: '输入员工姓名'
                    },
                    {
                        label: '用户名',
                        key: 'name',
                        placeholder: '输入用户名'
                    },
                    {
                        label: '工时',
                        key: 'hours',
                        placeholder: '输入工时信息'
                    },
                    {
                        label: '权限',
                        key: 'power',
                        placeholder: '选择权限信息'
                    }
                ],  //  搜索表单item
                current: null,
                passworded: false,
                treedata: [
                    {
                        title: '员工管理',
                        children: [
                            {
                                title: '查看',
                                value: 11
                            },
                            {
                                title: '编辑',
                                value: 12
                            }
                        ]
                    },
                    {
                        title: '客户管理',
                        children: [
                            {
                                title: '查看',
                                value: 21
                            },
                            {
                                title: '编辑',
                                value: 22
                            }
                        ]
                    },
                    {
                        title: '产品管理',
                        value: 31
                    }
                ],
                treeval: [11, 21, 31],
                permissions: ['11', '21'],
                showcheckbox: true
            }
        },
        computed: {
            treedataClone () {
                let treedata = JSON.parse(JSON.stringify(this.treedata))
                for (let i in treedata) {
                    if (!this.showcheckbox) {
                        treedata[i].disabled = true
                    } else {
                        treedata[i].disabled = false
                    }
                    for (let val in this.treeval) {
                        if (this.treeval[val] === treedata[i].value) {
                            treedata[i].checked = true
                        }
                    }
                    if (treedata[i].children != null) {
                        treedata[i].expand = true
                        for (let a in treedata[i].children) {
                            if (!this.showcheckbox) {
                                treedata[i].children[a].disabled = true
                            } else {
                                treedata[i].children[a].disabled = false
                            }
                            for (let val in this.treeval) {
                                if (this.treeval[val] === treedata[i].children[a].value) {
                                    treedata[i].children[a].checked = true
                                }
                            }
                        }
                    }
                }
                return treedata
            },
            tabledata () {
                let tabledata = JSON.parse(JSON.stringify(this.data))
                if (this.fastscreenVlue == '0') {
                    return tabledata
                }
                let data = tabledata.filter(value => {
                    // 返回处理后的值
                    return value.state == this.fastscreenVlue
                })
                return data
            }
        },
        watch: {
            '$store.state.role': {
                handler: function (val, oldVal) {
                    this.role = this._.find(val, function(chr) {
                        return chr == '11'
                    }) ? true : false
                },
                deep: true
            }
        },
        methods: {
            add () {
                if (!this.role) {
                    this.$Notice.error({
                        title: '权限不足!',
                        desc: ''
                    });
                    return
                }
                this.addStaff = true
            },
            stateupdate () {
                if (!this.role) {
                    this.$Notice.error({
                        title: '权限不足!',
                        desc: ''
                    });
                    return
                }
                this.stateedit = true;
                this.statecurrent = this.current.state
            },
            refresh () {
                this.http.getAllUser(this, {})
            },
            adduserOk () {  // 用户信息添加
                if (!this.role) {
                    this.$Notice.error({
                        title: '权限不足!',
                        desc: ''
                    });
                    return
                }
                if (this.addUserForm.password != this.addUserForm.passwordcheck) {
                    this.$Notice.error({
                        title: '两次密码不一致!',
                        desc: ''
                    });
                    this.adduserloading = false
                    setTimeout(() => {
                        this.adduserloading = true
                    }, 300)
                    return
                }
                this.current.name = this.addUserForm.name
                this.current.password = this.addUserForm.password
                this.http.editUserOther(this, this.current, 'adduser', 'adduserloading')
            },
            uodateuser () {
                if (!this.role) {
                    this.$Notice.error({
                        title: '权限不足!',
                        desc: ''
                    });
                    return
                }
                this.addUserForm.name = this.current.name
                this.adduser = true
            },
            removeuserok () {
                if (!this.role) {
                    this.$Notice.error({
                        title: '权限不足!',
                        desc: ''
                    });
                    return
                }
                this.current.name = '';
                this.current.password = '';
                this.http.editUserOther(this, this.current, 'removeusermodel', 'removeuserloading')
            },
            setuserdata (data) {  //请求成功后更新数据
                this.data = data
            },
            stateOk () {  //  状态修改
                if (!this.role) {
                    this.$Notice.error({
                        title: '权限不足!',
                        desc: ''
                    });
                    return
                }
                console.log(this.statecurrent)
                this.current.state = this.statecurrent
                this.http.editUserOther(this, this.current, 'stateedit', 'stateloading')
            },
            fastscreenClick (item) {
                this.fastscreenVlue = item.key
            },
            onCurrentChange (current) {
                console.log(current)
                this.current = current
                this.permissions = current.power
            },
            cardrightclick () {
                if (!this.role) {
                    this.$Notice.error({
                        title: '权限不足!',
                        desc: ''
                    });
                    return
                }
                this.showcheckbox = !this.showcheckbox
            },
            updataquanxian () {
                if (!this.role) {
                    this.$Notice.error({
                        title: '权限不足!',
                        desc: ''
                    });
                    return
                }
                console.log(this.permissions)
                let role = ''
                for (let i in this.permissions) {
                    role += this.permissions[i] + ','
                }
                this.http.updateRole(this, {id: this.current.id, role: role})
                this.showcheckbox = true
            },
            xqclick () {
                if (!this.role) {
                    this.$Notice.error({
                        title: '权限不足!',
                        desc: ''
                    });
                    return
                }
                this.editstaff = true
            },
            gsclick () {
                if (!this.role) {
                    this.$Notice.error({
                        title: '权限不足!',
                        desc: ''
                    });
                    return
                }
                //this.$set(this.hoursForm, 'hours', this.current.hours)
                this.$refs.edithours.setform(this.current.id)
                this.editHours = true
            }
        },
        components: {
            CardTable,
            MyCard,
            AddStaff,
            EditHours,
            EditStaff
        },
        mounted: function () {
            this.http.getAllUser(this, {})
            console.log(this.$store.state.role)
            this.role = this._.find(this.$store.state.role, function(chr) {
                return chr == '11'
            }) ? true : false
        }
    };
</script>
